<template>
    <el-container>
        <el-dialog title="作业评分" :visible.sync="UserWorkReviewDialogVisible">
            <user-work-review-form :user-work="currentReview" @complete="reviewComplete"></user-work-review-form>
        </el-dialog>
        <!--header-->
        <el-header>
            <el-row type="flex" class="row-bg" justify="space-between">
                <el-col>
                    <h1>作业列表</h1>
                </el-col>
            </el-row>
        </el-header>
        <el-container>
            <el-main>
                <el-table :data="works" stripe v-loading="loading" highlight-current-row>
                    <!--<el-table-column prop="id" label="#" width="80"></el-table-column>-->
                    <el-table-column prop="user_name" label="用户名"></el-table-column>
                    <el-table-column prop="question" label="题目"></el-table-column>
                    <el-table-column prop="mark" label="mark"></el-table-column>
                    <el-table-column prop="created_at" label="created_at"></el-table-column>
                    <el-table-column fixed="right" label="操作" width="350">
                        <template slot-scope="scope">

                            <el-button v-if="scope.row.mark===null" @click="review(scope.row)" size="small">评分
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!--pagination-->
                <div class="block">
                    <el-pagination
                            @size-change="pageSizeChange"
                            @current-change="currentPageChange"
                            background
                            :current-page="pagination.current_page"
                            :page-sizes="[15, 30, 50, 100]"
                            :page-size="pagination.per_page"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="pagination.total">
                    </el-pagination>
                </div>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>

    import UserWorkReviewForm from "../components/UserWorkReviewForm";

    export default {
        components: {UserWorkReviewForm},
        data() {
            return {
                UserWorkReviewDialogVisible: false,
                currentReview: null,
                works: [],
                loading: true,
                pagination: {
                    current_page: null,
                    per_page: null,
                    total: 0,
                },
            }
        },

        methods: {
            getWorksPromise() {
                return axios.get('user-work', {
                    params: {
                        page: this.pagination.current_page,
                        per_page: this.pagination.per_page,
                    }
                });
            },
            getWorks() {
                this.loading = true;
                this.getWorksPromise().then((response) => {
                    this.works = response.data.data;
                    this.pagination = {
                        current_page: parseInt(response.data.meta.current_page),
                        per_page: parseInt(response.data.meta.per_page),
                        total: parseInt(response.data.meta.total),
                    };
                    this.loading = false;
                })
            }, review(row) {
                this.currentReview = row;
                this.UserWorkReviewDialogVisible = true;
            }, pageSizeChange(per_page) {
                this.pagination.current_page = 1;
                this.pagination.per_page = per_page;
                this.getWorks();
            }, currentPageChange(current_page) {
                this.pagination.current_page = current_page;
                this.getWorks();
            }, reviewComplete() {
                this.UserWorkReviewDialogVisible = false;
                this.getWorks();
            }
        },
        mounted() {
            this.getWorks();
        }
    }
</script>

<style scoped>

</style>